<script setup>
import MyDatails from "../../components/MyDatails.vue";
import { useRoute, useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
const route = useRoute();
const data = reactive({
  mobile: route.params.mobile,
  SmscodeTitle: "获取验证码",
  sms_code: "",
  time: null,
});
// 点击获取验证码
const getSmscode = () => {
  data.time = 11;
  // 计时器
  let outTime = setInterval(() => {
    data.time--;
    data.butStatus = true;
    data.SmscodeTitle = `获取验证码(${data.time})`;
    // 判断数字为0时 结束
    if (data.time == 0) {
      clearInterval(outTime);
      data.time = 11;
      data.butStatus = false;
      data.SmscodeTitle = "获取验证码";
    }
  }, 1000);
};
const { mobile, SmscodeTitle } = toRefs(data);
</script>
<template>
  <!-- 跟换手机号 -->
  <div class="ReplaceTel">
    <MyDatails>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back" />
      </template>
      <template #text>
        <h3>安全认证</h3>
      </template>
    </MyDatails>
    <div class="ReplaceTel_title">
      为保障您的账户安全，更换手机号前需先安全验证
    </div>
    <div class="ReplaceTel_inp">
      <van-field label="当前手机号" :model-value="mobile" readonly />
      <div class="my_tel">
        <div>
          <van-field
            v-model="value"
            label="验证码"
            placeholder="请输入验证码"
          />
          <van-button
            type="primary"
            color="#f15a24"
            size="small"
            :disabled="butStatus"
            @click="getSmscode"
            >{{ SmscodeTitle }}</van-button
          >
        </div>
      </div>
    </div>
    <van-button
      style="width: 92%; margin: auto; margin-top: 50px"
      type="primary"
      color="#f15a24"
      block
      @click="login"
      >确定修改手机号</van-button
    >
  </div>
</template>



<style lang="scss" scoped>
.ReplaceTel {
  .ReplaceTel_title {
    line-height: 100px;
    font-size: 20px;
    text-align: center;
    background: #f8f8f8;
  }
  .ReplaceTel_inp {
    padding: 0 20px;
    .my_tel {
      display: flex;
      align-items: center;
      height: 100px;
      div {
        flex: 1;
        height: 100px;
        border-bottom: 1px solid #ededed;
        display: flex;
        align-items: center;
      }
      p {
        width: 50px;
        height: 50px;
        font-size: 0px;
        margin: 0 20px;
        z-index: 333;
        // margin-left: 10px;
      }
      input {
        font-size: 20px;
        flex: 1;
        height: 50%;
        border: none;
      }
    }
  }
}
</style>